<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-26px pt-40px pb-26px pr-26px flex product-detail">
            <div class="flex flex-col w-450px mr-40px">
                <div class="flex flex-center big-image">
                   <div class="h-300px flex justify-center items-center">
                    <el-image :src="product.bigImage" :preview-src-list="[product.bigImage as string]" :preview-teleported="true" :hide-on-click-modal="true"></el-image>
                   </div>
                </div>
                <div class="flex small-image">
                    <ul>
                        <li :class="{'active':product.index === 0}" @click="handleBigImg(product.InforPicTure,0)"><img :src="product.InforPicTure"></li>
                        <li :class="{'active':product.index === 1}" v-if="product.InforPicTure2" @click="handleBigImg(product.InforPicTure2,1)"><img :src="product.InforPicTure2"></li>
                        <li :class="{'active':product.index === 2}" v-if="product.InforPicTure3" @click="handleBigImg(product.InforPicTure3,2)"><img :src="product.InforPicTure3"></li>
                        <li :class="{'active':product.index === 3}" v-if="product.InforPicTure4" @click="handleBigImg(product.InforPicTure4,3)"><img :src="product.InforPicTure4"></li>
                        <li :class="{'active':product.index === 4}" v-if="product.InforPicTure5" @click="handleBigImg(product.InforPicTure5,4)"><img :src="product.InforPicTure5"></li>
                    </ul>
                </div>
            </div>
            <div class="flex-1 pt-10px">
                <div class="text-22px font-bold lh-28px mb-10px">{{ product.InforTitle }}</div>
                <dl class="product-info">
                    <dt>产品型号</dt>
                    <dd>{{ product.InforModel }}</dd>
                </dl>
                <dl class="product-info">
                    <dt>产品产地</dt>
                    <dd>{{ product.InforOrigin }}</dd>
                </dl>
                <dl class="product-info">
                    <dt>产品品牌</dt>
                    <dd>{{ product.BrandName }}</dd>
                </dl>
                <dl class="product-info">
                    <dt>产品描述</dt>
                    <dd>{{ product.Description }}</dd>
                </dl>
            </div>
        </div>
        <div class="pl-26px pt-26px pb-26px pr-26px flex product-detail">
            <div class="flex flex-col w-450px mr-40px">
                <div class="product-title">主关键词</div>
                <ul>
                    <li>{{ product.Keyword }}</li>
                </ul>
                <div class="product-title">左侧修饰词</div>
                <ul>
                    <li>{{ product.LKeyword }}</li>
                </ul>
                <div class="product-title">右侧修饰词</div>
                <ul>
                    <li>{{ product.RKeyword }}</li>
                </ul>
                <div class="product-title">短词组合预览</div>
                <ul>
                    <li :style="{ width: item.length > 14 ? '100%' : '' }" :title="item" v-for="item in product.normalKeywords" :key="item">{{ item }}</li>
                </ul>
                <div class="product-title">普通词组合预览</div>
                <ul>
                    <li :style="{ width: item.length > 14 ? '100%' : '' }" :title="item" v-for="item in product.normalKeywords" :key="item">{{ item }}</li>
                </ul>
                <div class="product-title">自定义关键词</div>
                <ul>
                    <li :style="{ width: item.length > 14 ? '100%' : '' }" :title="item" v-for="item in product.customizeKeywords" :key="item">{{ item }}</li>
                </ul>
                <div class="product-title">审核人员删除词</div>
                <ul>
                    <li :style="{ width: item.length > 14 ? '100%' : '' }" :title="item" v-for="item in product.deleteKeyword" :key="item">{{ item }}</li>
                </ul>
            </div>
            <div class="flex-1">
                <div class="product-title">产品详情</div>
                <div class="pt-20px pb-15px pl-12px pr-12px lh-24px break-all" v-html="product.InforContent"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getProductDetailApi } from '@/api/b2b'
import { IProItem } from '@/api/b2b/type'

const route = useRoute()

const product = reactive<IProItem>({
    id: 0,
    InforTitle: '',
    InforModel: '',
    InforOrigin: '',
    BrandName: '',
    Price: '',
    Description: '',
    InforPicTure: '',
    InforPicTure2: '',
    InforPicTure3: '',
    InforPicTure4: '',
    InforPicTure5: '',
    InforContent: '',
    Keyword: '',
    LKeyword: '',
    RKeyword: '',
    CusKeyword: '',
    shortKeywords: <string[]>[],
    normalKeywords: <string[]>[],
    customizeKeywords: <string[]>[],
    deleteKeyword: '',
    bigImage:'',
    index:0
})
async function getProductDetail() {
    const id = route.params.id
    const res = await getProductDetailApi({
        id: id
    })
    product.id = res.data.id;
    product.InforTitle = res.data.InforTitle;
    product.InforModel = res.data.InforModel;
    product.InforOrigin = res.data.InforOrigin;
    product.BrandName = res.data.BrandName;
    product.Price = res.data.Price;
    product.Description = res.data.Description;
    product.InforPicTure = res.data.InforPicTure;
    product.InforPicTure2 = res.data.InforPicTure2;
    product.InforPicTure3 = res.data.InforPicTure3;
    product.InforPicTure4 = res.data.InforPicTure4;
    product.InforPicTure5 = res.data.InforPicTure5;
    product.bigImage = res.data.InforPicTure;
    product.InforContent = res.data.InforContent;
    product.Keyword = res.data.Keyword;
    product.LKeyword = res.data.LKeyword;
    product.RKeyword = res.data.RKeyword;
    product.CusKeyword = res.data.CusKeyword;
    product.deleteKeyword = res.DeleteKeyword.split(',');
    product.customizeKeywords = res.data.CusKeyword.split('/');

    //拼接短词组合
    product.shortKeywords = getShortKeyword(product.Keyword ?? '', product.LKeyword ?? '', product.RKeyword ?? '')
    //拼接普通词组合
    product.normalKeywords = getNormalKeyword(product.Keyword ?? '', product.LKeyword ?? '', product.RKeyword ?? '')
}

function getShortKeyword(keyword: string, lKeyword: string, rKeyword: string): string[] {
    const result = new Set<string>([keyword]);

    const leftKeywords = lKeyword ? lKeyword.split('/') : [];
    const rightKeywords = rKeyword ? rKeyword.split('/') : [];

    leftKeywords.forEach((item: string) => {
        result.add(item + keyword);
    });

    rightKeywords.forEach((item: string) => {
        result.add(keyword + item);
    });

    return Array.from(result);
}

function getNormalKeyword(keyword: string, lKeyword: string, rKeyword: string): string[] {
    let lkArr = lKeyword.split('/')
    let rkArr = rKeyword.split('/')
    const combinations = [];
    for (const left of lkArr) {
        for (const right of rkArr) {
            combinations.push(`${left}${keyword}${right}`);
        }
    }
    return combinations;
}

function handleBigImg(img:string|undefined,index:number){
    product.bigImage = img
    product.index = index
}

onMounted(() => {
    getProductDetail()
})
</script>

<style lang="scss" scoped>
.words {
    width: 100%;
    border: 1px solid var(--menuBorderColor);
    padding: 14px 0;
    border-radius: 4px;

    ul {
        overflow: hidden;

        li {
            width: 25%;
            float: left;
            font-size: 14px;
            line-height: 2;
            padding-left: 24px;
        }
    }
}
.big-image{
    width: 100%;
    height: 300px;
    border-radius: 4px;
    border: 1px solid var(--menuBorderColor);
    overflow: hidden;
}
.small-image{
    margin-top: 12px;
    ul{
        overflow: hidden;
        li{
            width:78px;
            float: left;
            height: 78px;
            margin-right: 12px;
            border: 1px solid var(--menuBorderColor);
            border-radius: 4px;
            overflow: hidden;
            justify-content: center;
            align-items: center;
            display: flex;
            cursor: pointer;
            &.active{
                border-color: var(--mainColor);
                border-width: 2px;
            }
            &:last-child{
                margin-right: 0;
            }
        }
    }
}
.product-info{
    padding: 12px 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.4;
    dt{
        float: left;
        color: #999999;
    }
    dd{
        color: var(--title-color);
        padding: 0 0 0 20px;
        overflow: hidden;
    }
}
.product-title{
    height: 34px;
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    padding: 0 12px;
    background-color: var(--mainBg);
    border-radius: 4px;
    & + ul{
        padding:12px 0 15px;
        margin-bottom:15px;
        overflow: hidden;
        li{
            padding:6px 10px 6px 12px;
            float: left;
            font-size: 14px;
            width: 50%;
        }
    }
}
:deep(.el-image){
    height: 100%;
}
.product-detail{
    max-width: 1600px;
    margin: 0 auto;
}
</style>